<template>
	<div>
		<div class="SideMenu">
			<ul class="SideMenu-catalog">
				<li class="SideMenu-catalog-item SideMenu-Select" data-id='0'>
					<a href="#SideMenu-content-item0">HTML</a>
				</li>
				<li class="SideMenu-catalog-item" data-id='1'>
					<a href="#SideMenu-content-item1">CSS</a>
				</li>
				<li class="SideMenu-catalog-item" data-id='2'>
					<a href="#SideMenu-content-item2">JavaScript</a>
				</li>
				<li class="SideMenu-catalog-item" data-id='3'>
					<a href="#SideMenu-content-item3">Vue</a>
				</li>
				<li class="SideMenu-catalog-item" data-id='4'>
					<a href="#SideMenu-content-item4">React</a>
				</li>
				<li class="SideMenu-catalog-item" data-id='5'>
					<a href="#SideMenu-content-item5">NodeJs</a>
				</li>
			</ul>
			<div class="SideMenu-content">
				<div data-id='0' id="SideMenu-content-item0" class="SideMenu-content-item">
					<h3>HTML</h3>
					<p>
						HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，
						HTML命令可以说明文字，图形、动画、声音、表格、链接等。
					</p>
					<p>
						超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。
						这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
					</p>
				</div>
				<div data-id='1' id="SideMenu-content-item1" class="SideMenu-content-item">
					<h3>CSS</h3>
					<p>
						层叠样式表(英文全称：Cascading Style
						Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，
						还可以配合各种脚本语言动态地对网页各元素进行格式化。
					</p>
					<p>
						CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
					</p>
				</div>
				<div data-id='2' id="SideMenu-content-item2" class="SideMenu-content-item">
					<h3>JavaScript</h3>
					<p>
						JavaScript（简称“JS”）
						是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、
						多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
					</p>
					<p>
						JavaScript在1995年由Netscape公司的Brendan
						Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。
						但实际上它的语法风格与Self及Scheme较为接近。
					</p>
					<p>JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3
						标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，
						该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。</p>
				</div>
				<div data-id='3' id="SideMenu-content-item3" class="SideMenu-content-item">
					<h3>Vue</h3>
					<p>
						Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上
						手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
					</p>
				</div>
				<div data-id='4' id="SideMenu-content-item4" class="SideMenu-content-item">
					<h3>React</h3>
					<p>React 是一个用于构建用户界面的 JAVASCRIPT 库。</p>
					<p>React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。</p>
					<p>React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。</p>
					<p> React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。</p>
				</div>
				<div data-id='5' id="SideMenu-content-item5" class="SideMenu-content-item">
					<h3>NodeJs</h3>
					<p>简单的说 Node.js 就是运行在服务端的 JavaScript。</p>
					<p>Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。</p>
					<p>Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:"",
		mounted() {
			let catalogs = Array.from(document.querySelectorAll('.SideMenu-catalog-item'))
			let sections = Array.from(document.querySelectorAll('.SideMenu-content-item'))
			let endID = 0; // 上一次操作的id
			
			
			// 监听全局滚轮滚动事件
			document.querySelector('.app-main').onscroll = function() {
				let Win_scrollTop = document.querySelector('.app-main').scrollTop
				// console.log('距离顶部距离', Win_scrollTop)
				// 这样内容在中间的时候就判断了
				Win_scrollTop = Win_scrollTop + window.innerHeight / 3
			
				for (let i in sections) {
					let section = sections[i];
					// 状态清空掉
					catalogs[i].classList.remove('SideMenu-Select')
					if (Win_scrollTop > section.offsetTop) {
						// 这样就保证了赋值的总是最后一个
						endID = section.dataset.id
					}
				}
				if (endID) {
					catalogs[endID].classList.add('SideMenu-Select')  // 赋值新的状态
				}
			}
			/**
			 * 滚动滚动动画
			 * @param {Object} moveToTop   要移动到的目标值
			 * @param {Object} time		   滚动的动画时间
			 */
			let runTo = function(moveToTop, time) {
				// 大多数电脑显示器的刷新频率是 60Hz，即每秒重绘 60次，因此平滑动画的最佳循环间隔是通常是 1000ms/60，约等于16.6ms
				
				// 0.1  600     
				// 0.5  30     
				// 1 	60
				let zhen =  60*(time/1000)*2     // *2 伪处理 时间偏差
				let Count = 0   // 用来登记是否达到临界值
				let curToTop = document.querySelector('.app-main').scrollTop // 当前距离顶部的距离
				let moveStep = Math.floor(Math.abs(curToTop-moveToTop)/zhen);	// 每次滚动的step 通过  距离/时间 来计算
				console.log('帧数',moveStep,zhen,curToTop);
				(function move() {
					Count += moveStep
					if (moveToTop >= curToTop + Count) {
						document.querySelector('.app-main').scrollTop = curToTop + Count
						requestAnimationFrame(move)
					}else if(moveToTop <= curToTop - Count){
						document.querySelector('.app-main').scrollTop = curToTop - Count
						requestAnimationFrame(move)
					}
					return
				})()
			}
			
			// 目录列表点击事件
			for (let i in catalogs) {
				catalogs[i].addEventListener('click', function() {
					// 防止重复点击当前块
					if (i == endID) return
					endID = i
					// 阻止锚点滚动
					// e.preventDefault();
					
					
					// jq封装的方法
					// $('html, body').animate({
					// 	scrollTop: sections[i].offsetTop
					// }, 500);
					
					// 原生方法
					runTo(sections[i].offsetTop,500)
				})
			}
		}
	}
</script>

<style scoped="scoped" lang="less">
	/* 初始化 */
	ul,
	li {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	
	a {
		color: inherit;
		text-decoration: none;
		display: block;
		border: none;
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
		-webkit-user-select: none;
		-moz-user-focus: none;
		-moz-user-select: none;
	}
	
	
	
	
	.SideMenu {
		display: flex;
		justify-content: space-around;
		max-width: 80%;
	}
	
	.SideMenu-catalog {
		box-sizing: border-box;
		height: 200px;
		width: 200px;
		position: sticky;
		top: 10px;
	}
	
	.SideMenu-catalog-item {
		padding: 20px;
		margin-left: 0px;
		transition: all .2s;
	}
	
	.SideMenu-catalog-item:hover {
		cursor: pointer;
	}
	
	
	/* 当前选中样式 */
	.SideMenu-Select {
		position: relative;
		margin-left: 20px;
		color: #55aaff;
	}
	
	.SideMenu-Select::before {
		content: "";
		position: absolute;
		width: 20px;
		height: 2px;
		top: 50%;
		left: -20px;
		padding-right: -20px;
		transform: translateY(-50%);
		background-color: #55aaff;
	}
	
	
	.SideMenu-content {}
	
	.SideMenu-content-item {
		background-color: #f5f4fb;
		width: 600px;
		min-height: 800px;
	
		padding: 20px;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 20px;
	}
</style>
